<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width:580px;
            height: auto;
            border:1px solid black;
            margin: 0 auto;
            padding:10px;
        }
        #box ul:after{
            clear: both;
            content:".";
            line-height:0;
            display: block;
        }
        #box ul li{
            list-style-type: none;
            height:auto;
            padding:20px 0 0 20px;
            float: left;
        }
        #box ul li img{
            width: 170px;
            height:100px;
            border:1px solid #ccc;
            box-shadow: 3px 3px 5px #ccc;
        }
        .rot {
            animation: rot 1s 1 linear;
        }
        .sca{
            animation: sca 1s 1 linear;
        }
        @keyframes sca {
            0%   {transform:scale(1);}
            25%  {transform:scale(1.2);}
            50%  {transform:scale(0.8);}
            75%  {transform:scale(1.2);}
            100% {transform:scale(1);}
        }
        @keyframes rot {
            0%   {transform:rotate(10deg)}
            25%  {transform:rotate(-20deg)}
            50%  {transform:rotate(15deg)}
            75%  {transform:rotate(-5deg)}
            100% {transform:rotate(0deg)}
        }
        @keyframes tra {
            
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li><img src="img/1.png" alt=""></li>
        <li><img src="img/2.png" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/4.png" alt=""></li>
        <li><img src="img/5.jpg" alt=""></li>
        <li><img src="img/6.jpg" alt=""></li>
        <li><img src="img/7.jpg" alt=""></li>
        <li><img src="img/8.jpg" alt=""></li>
        <li><img src="img/9.png" alt=""></li>
    </ul>
</div>
<script>
    var arr=["sca","rot"];
    var oImg=document.querySelectorAll("#box ul li img");
    for(var i=0;i<oImg.length;i++){
        oImg[i].onmouseover=function () {
            var num=parseInt(Math.random()*2);
            this.className=arr[num];
        }
        //不消除类名会卡顿
        oImg[i].onmouseout=function () {
            var num=parseInt(Math.random()*2);
            this.className="";
        }
    }
</script>
</body>
</html>